<template>
  <div>
    <div class="block">
      <el-tree
        ref="tree"
        :data="treeData"
        show-checkbox
        node-key="id"
        default-expand-all
        :expand-on-click-node="false"
        :render-content="renderContent"
      />
    </div>
  </div>
</template>

<script>

import { getAuthsTree, getMyAuthsByRoleId, saveMyAuthsByRoleId } from '@/api/auth'

export default {
  props: {
    role: Object,
    closeDialog: Function
  },
  data() {
    return {
      treeData: []
    }
  },
  watch: {
    role: {
      immediate: true, // 这句重要
      handler(role) {
        this.checkedAuths(role.id)
      }
    }
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      getAuthsTree().then(result => {
        this.treeData = result.map.list
        setTimeout(() => {
          this.changeCss()
        })
      })
    },

    checkedAuths(roleId) {
      getMyAuthsByRoleId({ roleId: roleId }).then(result => {
        let data = result.map.menu4RoleConfByRoleIdJson
        data = JSON.parse(data)
        const menuIdArr = []
        data.forEach((menu, index) => {
          menuIdArr[index] = menu.menuId
        })
        this.$refs.tree.setCheckedKeys(menuIdArr)
      })
    },

    saveAuths() {
      // 取子节点ID
      const menuIdArr = []
      const nodes = this.$refs.tree.getCheckedNodes()
      nodes.forEach((node) => {
        if (node.children === undefined) {
          menuIdArr.push(node.id)
        }
      })

      saveMyAuthsByRoleId({ roleId: this.role.id, menuIdArr: menuIdArr.toString() }).then(result => {
        if (result.code === 1) {
          this.$notify({
            title: 'Success',
            message: '保存成功',
            type: 'success',
            duration: 2000
          })
          this.closeDialog()
        }
      })
    },

    resetChecked() {
      this.$refs.tree.setCheckedKeys([])
    },

    /* append(data) {
      const newChild = { id: id++, label: 'testtest', children: [] }
      if (!data.children) {
        this.$set(data, 'children', [])
      }
      data.children.push(newChild)
    },*/

    remove(node, data) {
      this.changeCss()
      const parent = node.parent
      const children = parent.data.children || parent.data
      const index = children.findIndex(d => d.id === data.id)
      children.splice(index, 1)
    },

    // 内容区渲染后执行 判断底层 赋 class
    renderContent(h, { node, data, store }) {
      let classname = ''
      if (node.level === 3) {
        classname = 'levelname'
      }
      // 由于项目中有二级菜单也有三级菜单，就要在此做出判断。
      if (node.level === 2 && node.childNodes.length === 0) {
        classname = 'levelname'
      }
      return (
        <p class={classname}>
          {node.label}
        </p>)
    },

    changeCss() {
      var levelName = document.getElementsByClassName('levelname') // levelname是上面的最底层节点的名字
      for (var i = 0; i < levelName.length; i++) {
        // cssFloat 兼容 ie6-8  styleFloat 兼容ie9及标准浏览器
        levelName[i].parentNode.style.cssFloat = 'left' // 最底层的节点，包括多选框和名字都让他左浮动
        levelName[i].parentNode.style.styleFloat = 'left'
      }
    }

  }
}
</script>
<style scoped>

</style>
